Bug 588462 - Use a plain black panel with a different layout

The semi-transparent gradient on the panel is replaced by a
solid black background. The shadow below the panel is removed.
The clock is put at the center instead of the right side of
the panel and has the date removed. The user icon is hidden.
Instead of boldface, a regular font is used. Padding is added
on each side and between panel elements.

button.js: Allow for custom text colors and fonts.
panel.js: Change the panel colors and layout, remove the shadow.

diff --git a/js/ui/button.js b/js/ui/button.js
index 4ce88ad55176fcfbdd715197a95cb480b2acc6fb..60d1d8c2021b98376b3eff35133c43a6595acb14 100644 (file)
--- a/js/ui/button.js
+++ b/js/ui/button.js
@@ -14,12 +14,20 @@ DEFAULT_BUTTON_COLOR.from_pixel(0xeeddcc66);
 const DEFAULT_PRESSED_BUTTON_COLOR = new Clutter.Color();
 DEFAULT_PRESSED_BUTTON_COLOR.from_pixel(0xccbbaa66);
 
-function Button(widget, buttonColor, pressedButtonColor, staysPressed, minWidth, minHeight) {
-    this._init(widget, buttonColor, pressedButtonColor, staysPressed, minWidth, minHeight);
+const DEFAULT_TEXT_COLOR = new Clutter.Color();
+DEFAULT_TEXT_COLOR.from_pixel(0x000000ff);
+
+const DEFAULT_FONT = 'Sans Bold 16px';
+
+// Padding on the left and right side of the button.
+const SIDE_PADDING = 14;
+
+function Button(widget, buttonColor, pressedButtonColor, textColor, staysPressed, minWidth, minHeight, font) {
+    this._init(widget, buttonColor, pressedButtonColor, textColor, staysPressed, minWidth, minHeight, font);
 }
 
 Button.prototype = {
-    _init : function(widgetOrText, buttonColor, pressedButtonColor, staysPressed, minWidth, minHeight) {
+    _init : function(widgetOrText, buttonColor, pressedButtonColor, textColor, staysPressed, minWidth, minHeight, font) {
         let me = this;
 
         this._buttonColor = buttonColor
@@ -30,10 +38,18 @@ Button.prototype = {
         if (pressedButtonColor == null)
             this._pressedButtonColor = DEFAULT_PRESSED_BUTTON_COLOR;
 
+        this._textColor = textColor;
+        if (textColor == null)
+            this._textColor = DEFAULT_TEXT_COLOR;
+
         this._staysPressed = staysPressed
         if (staysPressed == null)
             this._staysPressed = false;
 
+        this._font = font;
+        if (font == null)
+            this._font = DEFAULT_FONT;
+
         if (minWidth == null)
             minWidth = 0;
         if (minHeight == null)
@@ -47,13 +63,14 @@ Button.prototype = {
 
         this.button = new Big.Box({ reactive: true,
                                     corner_radius: 5,
-                                    padding_left: 4,
-                                    padding_right: 4,
+                                    padding_left: SIDE_PADDING,
+                                    padding_right: SIDE_PADDING,
                                     orientation: Big.BoxOrientation.HORIZONTAL,
                                     y_align: Big.BoxAlignment.CENTER
                                   });
         if (typeof widgetOrText == 'string') {
-            this._widget = new Clutter.Text({ font_name: "Sans Bold 16px",
+            this._widget = new Clutter.Text({ font_name: this._font,
+                                              color: this._textColor,
                                               text: widgetOrText });
         } else {
             this._widget = widgetOrText;

diff --git a/js/ui/panel.js b/js/ui/panel.js
index bddb6ae6862a75a3f5f6c136c6e8dacd0611ffc6..ec6f00b99a328da124b03d5bdd779778b477e0cd 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -12,31 +12,29 @@ const Tweener = imports.ui.tweener;
 const Button = imports.ui.button;
 const Main = imports.ui.main;
 
-const PANEL_HEIGHT = 32;
+const PANEL_HEIGHT = 26;
 const TRAY_HEIGHT = PANEL_HEIGHT - 1;
-const SHADOW_HEIGHT = 6;
-
-// The panel has a transparent white background with a gradient.
-const PANEL_TOP_COLOR = new Clutter.Color();
-PANEL_TOP_COLOR.from_pixel(0xffffff99);
-const PANEL_MIDDLE_COLOR = new Clutter.Color();
-PANEL_MIDDLE_COLOR.from_pixel(0xffffff88);
-const PANEL_BOTTOM_COLOR = new Clutter.Color();
-PANEL_BOTTOM_COLOR.from_pixel(0xffffffaa);
-
-const SHADOW_COLOR = new Clutter.Color();
-SHADOW_COLOR.from_pixel(0x00000033);
+
+const PANEL_BACKGROUND_COLOR = new Clutter.Color();
+PANEL_BACKGROUND_COLOR.from_pixel(0x000000ff);
+const PANEL_FOREGROUND_COLOR = new Clutter.Color();
+PANEL_FOREGROUND_COLOR.from_pixel(0xffffffff);
+
 const TRANSPARENT_COLOR = new Clutter.Color();
 TRANSPARENT_COLOR.from_pixel(0x00000000);
 
-// Darken (pressed) buttons; lightening has no effect on white backgrounds.
+// Don't make the mouse hover effect visible to the user for a menu feel.
 const PANEL_BUTTON_COLOR = new Clutter.Color();
-PANEL_BUTTON_COLOR.from_pixel(0x00000015);
+PANEL_BUTTON_COLOR.from_pixel(0x00000000);
+
+// Lighten pressed buttons; darkening has no effect on a black background.
 const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
-PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0x00000030);
+PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0x324c6ffa);
+
+const DEFAULT_FONT = 'Sans 16px';
 
 const TRAY_PADDING = 0;
-const TRAY_SPACING = 2;
+const TRAY_SPACING = 14;
 
 // Used for the tray icon container with gtk pre-2.16, which doesn't
 // fully support tray icon transparency
@@ -58,26 +56,11 @@ Panel.prototype = {
         // Put the background under the panel within a group.
         this.actor = new Clutter.Group();
 
-        // Create backBox, which contains two boxes, backUpper and backLower,
-        // for the background gradients and one for the shadow. The shadow at
-        // the bottom has a fixed height (packing flag NONE), and the rest of
-        // the height above is divided evenly between backUpper and backLower
-        // (with packing flag EXPAND).
-        let backBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                    x: 0,
-                                    y: 0,
-                                    width: global.screen_width,
-                                    height: PANEL_HEIGHT + SHADOW_HEIGHT });
-        let backUpper = global.create_vertical_gradient(PANEL_TOP_COLOR,
-                                                        PANEL_MIDDLE_COLOR);
-        let backLower = global.create_vertical_gradient(PANEL_MIDDLE_COLOR,
-                                                        PANEL_BOTTOM_COLOR);
-        let shadow = global.create_vertical_gradient(SHADOW_COLOR,
-                                                     TRANSPARENT_COLOR);
-        shadow.set_height(SHADOW_HEIGHT + 1);
-        backBox.append(backUpper, Big.BoxPackFlags.EXPAND);
-        backBox.append(backLower, Big.BoxPackFlags.EXPAND);
-        backBox.append(shadow, Big.BoxPackFlags.NONE);
+        // backBox contains the panel background and the clock.
+        let backBox = new Big.Box({ width: global.screen_width,
+                                    height: PANEL_HEIGHT,
+                                    backgroundColor: PANEL_BACKGROUND_COLOR,
+                                    x_align: Big.BoxAlignment.CENTER });
         this.actor.add_actor(backBox);
 
         let box = new Big.Box({ x: 0,
@@ -87,15 +70,20 @@ Panel.prototype = {
                                 orientation: Big.BoxOrientation.HORIZONTAL,
                                 spacing: 4 });
 
-        this.button = new Button.Button("Activities", PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, true, null, PANEL_HEIGHT);
+        this.button = new Button.Button("Activities", PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, PANEL_FOREGROUND_COLOR, true, null, PANEL_HEIGHT, DEFAULT_FONT);
 
         box.append(this.button.button, Big.BoxPackFlags.NONE);
 
         let statusbox = new Big.Box();
         let statusmenu = this._statusmenu = new Shell.StatusMenu();
-        statusmenu.get_name().fontName = 'Sans Bold 16px';
+        statusmenu.get_icon().hide();
+        statusmenu.get_name().fontName = DEFAULT_FONT;
+        statusmenu.get_name().color = PANEL_FOREGROUND_COLOR;
         statusbox.append(this._statusmenu, Big.BoxPackFlags.NONE);
-        let statusbutton = new Button.Button(statusbox, PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR,
+        let statusbutton = new Button.Button(statusbox,
+                                             PANEL_BUTTON_COLOR,
+                                             PRESSED_BUTTON_BACKGROUND_COLOR,
+                                             PANEL_FOREGROUND_COLOR,
                                              true, null, PANEL_HEIGHT);
         statusbutton.button.connect('button-press-event', function (b, e) {
             statusmenu.toggle(e);
@@ -107,13 +95,14 @@ Panel.prototype = {
             statusbutton.release();
         });
 
-        this._clock = new Clutter.Text({ font_name: "Sans Bold 16px",
+        this._clock = new Clutter.Text({ font_name: DEFAULT_FONT,
+                                         color: PANEL_FOREGROUND_COLOR,
                                          text: "" });
         let clockbox = new Big.Box({ y_align: Big.BoxAlignment.CENTER,
                                      padding_left: 4,
                                      padding_right: 4 });
         clockbox.append(this._clock, Big.BoxPackFlags.NONE);
-        box.append(clockbox, Big.BoxPackFlags.END);
+        backBox.append(clockbox, Big.BoxPackFlags.EXPAND);
 
         // The tray icons live in trayBox within trayContainer.
         // The trayBox is hidden when there are no tray icons.
@@ -193,7 +182,7 @@ Panel.prototype = {
             displayDate.setMinutes(displayDate.getMinutes() + 1);
             msecRemaining += 60000;
         }
-        this._clock.set_text(displayDate.toLocaleFormat("%a %b %e, %l:%M %p"));
+        this._clock.set_text(displayDate.toLocaleFormat("%a %l:%M %p"));
         Mainloop.timeout_add(msecRemaining, Lang.bind(this, this._updateClock));
         return false;
     }